<script setup lang="ts">
// 做好接收数据的准备
// 不设置默认值
// const props = defineProps<{
//     name: string
//     age: number
//     male: boolean
// }>()

// 设置默认值
const props = withDefaults(defineProps<{
    name: string
    money?: number
}>(), { name: 'rose', age: 16, male: false })

// 逻辑中要使用 props 的数据需要点出来
console.log(props.name)

// 定义了一个叫做 changeMoney 的事件
// 参数 money, 类型是 number
// 返回值为空
defineEmits<{
    (e: 'changeMoney', money: number): void
}>()
</script>

<template>
<div>
    <h2>我是子组件</h2>
    <!-- props 定义的数据，子组件的结构中可以直接使用，不需要用 props 点出来 -->
    <p>{{ name }}</p>
    <p>{{ money }}</p>
    <button @click="$emit('changeMoney', 800)">找老爹要钱</button>
</div>
</template>

<style scoped>
div {
    width: 200px;
    height: 200px;
    background-color: skyblue;
}
</style>
